<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <!--    导入easyui样式-->
    <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css" />
    <!--    导入easyui相关的js库-->
    <script type="text/javascript" src="../easyui/jquery.min.js"></script>
    <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js"></script>
    <%--导入layer--%>
    <script src="../jQuery/jquery-1.11.2.js"></script>
    <script src="../layer/layer/layer.js"></script>
    <!--导入layui-->
    <link rel="stylesheet" href="../layui/layui/css/layui.css">
    <script src="../layui/layui/layui.js" charset="utf-8"></script>

    <!--设置样式-->
    <style>
        span{
            font-size: 45px;
            font-family: "楷体";
            margin-left: 170px;
        }
        img{
            width: 130px;
            height: 130px;
            margin-left: 2%;
        }
        #head{
            background-color: cornflowerblue;
            height: 140px;
        }

        #foot{
            background-color: cornflowerblue;
            border: 13px solid cornflowerblue;
            text-align: center;
            color: white;
        }
    </style>
    <script type="text/javascript">
        $(function(){
            //点击退出系统将其退出到登录页面
            $("#a2").click(function(){
                window.location.href="login.jsp";
            });
            //点击控制器和个人中心显示功能暂未开放
            $("#control,#self").on('click', function(){
                layer.msg('该功能暂未开放');
            });
            <!--设置菜单栏动态选择效果-->
            layui.use('element', function(){
                var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
                //监听导航点击
                element.on('nav(demo)', function(elem){
                    layer.msg(elem.text());
                });
            });

            //根据点击事件修改导入路径
            $(".a").click(function(){
                var iframe=$("#iframe");
                if($(this).text()=="在线考试"){//判断点击的是首页
                    $.ajax({
                        type:"POST",
                        url:"../ExamsPageServlet",
                        data:"method=checkState",
                        success:function(data){
                            //判断返回值如果是ok，那么就说明该学员有考试可以参加
                            if (data=="ok"){
                                iframe.attr("src","ForePapers.jsp");
                            }else{//判断状态不为ok，该学员没有考试
                                iframe.attr("src","ForeNullPaper.jsp");
                            }
                        }
                    });
                }else if ($(this).text()=="查询成绩"){
                    iframe.attr("src","ForeGrade.jsp");
                }else if ($(this).text()=="首页"){
                    iframe.attr("src","ForeMain.jsp");
                }else if ($(this).text()=="课程练习"){
                    iframe.attr("src","ForeCoure.jsp");
                }
            });
            //定义用于关闭窗口
            var closeDiv;
            //点击修改密码
            $("#a1").click(function(){
                layui.use(['layer','form'],function(){
                    var layer=layui.layer;
                    var form=layui.form;
                    closeDiv=layer.open({
                        type:1,
                        title:"修改密码",
                        offset: 'auto',
                        area:["500px","330px"],
                        content:$("#MaxDiv").html()
                    });

                    //修改密码时点击确认
                    form.on("submit(ok)",function(data){
                        var data1 = data.field;
                        if(data1.newStuPwd==data1.newStuPwds){
                            $.ajax({
                                url:"../PwdUpdate?method=studentPwdUdt",
                                type: "POST",
                                data:"stuPwd="+data1.stuPwd+"&newStuPwd="+data1.newStuPwd,
                                dataType:"text",
                                success:function(data){
                                    if (data=="ok"){
                                        layer.msg("修改密码成功")
                                        layer.close(closeDiv);
                                    }else{
                                        layer.msg("修改密码失败")
                                    }
                                }
                            });
                        }else{
                            layer.msg("您输入的密码和重复密码不相符")
                        }
                        return false;
                    });

                });
            });


        });
    </script>
</head>
<body style="overflow-y: hidden">

<!--修改密码层-->
<div style="display: none;" id="MaxDiv">
    <div style="margin-top: 40px;margin-left: 80px;">
        <form class="layui-form"  method="post" lay-filter="myForm">
            <!--用户编号-->
            <div  class="layui-form-item" lay-filter="user">
                <div class="layui-input-inline" <%--style="width: 350px;"--%> >
                    <input  type="password" name="stuPwd" lay-verify="required" placeholder="--请输入原始密码--" style="width: 330px;"  autocomplete="off" class="layui-input " />
                </div>
            </div>

            <div  class="layui-form-item" lay-filter="user">
                <div class="layui-input-inline" >
                    <input type="password" name="newStuPwd" lay-verify="required" placeholder="--请输入新密码--"  style="width: 330px;"  autocomplete="off" class="layui-input" value="" >
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input  type="password" name="newStuPwds" placeholder="--重新输入密码--" style="width: 330px;"  autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" style="margin-top: 20px" lay-submit lay-filter="ok" id="okk"  >修改</button>
                    <button type="reset" style="margin-top: 20px" class="layui-btn layui-btn-warm">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>


    <div id="head">
        <img src="../img/logo3.gif" style="height: 100px;width: 100px;margin-top: 20px">

        <ul class="layui-nav" style="margin-top: -70px">
            <li class="layui-nav-item" style="float: right;margin-right: 40px;">
                <a href=""><img src="../img/003.png" class="layui-nav-img" style="height: 65px;width: 65px;margin-top: -20px"></a>
                <dl class="layui-nav-child">
                    <dd><a id="a1" href="javascript:;" style="font-size: 25px">修改密码</a></dd>
                    <dd><a id="a2" href="javascript:;" style="font-size: 25px;">退出系统</a></dd>
                </dl>
            </li>
        </ul>
        <span>三人行在线考试系统</span>
    </div>

    <div style="height: 600px;width: 200px;background: #5387C6;float: left;">
        <ul class="layui-nav layui-nav-tree" lay-filter="test" style="background: #5387C6;">
            <li class="layui-nav-item layui-this">
                <a  href="#" class="a" style="font-size: 20px">首页</a>
            </li>
            <li class="layui-nav-item">
                <a href="#" class="a" style="font-size: 20px;margin-top: 20px">课程练习</a>
            </li>
            <li class="layui-nav-item">
                <a href="#" class="a" style="font-size: 20px;margin-top: 20px">在线考试</a>
            </li>
            <li class="layui-nav-item">
                <a href="#" class="a" style="font-size: 20px;margin-top: 20px">查询成绩</a>
            </li>
        </ul>
    </div>

    <%--显示主要内容部分--%>
        <div style="width: 87%;height: 600px;margin-left: 200px;overflow-y: hidden ;">
            <iframe id="iframe" src="ForeMain.jsp" style="width: 99%;height: 100%;"></iframe>
        </div>


        <%--页脚栏--%>
        <div id="foot">
            <p>Copyright&copy;2000-2020 www.qqks.net All Rights Reserved.</p>
        </div>


</body>
</html>
